<%--
  Created by IntelliJ IDEA.
  User: cfy
  Date: 2018/7/30
  Time: 下午5:23
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!--输出,条件,迭代标签库-->
<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="fmt"%> <!--数据格式化标签库-->--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="fn"%> <!--常用函数标签库-->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="sql"%> <!--数据库相关标签库-->
<%@ page isELIgnored="false"%> <!--这个很重要！！！！！！不设的话，EL表达式不会解析-->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>GPS!</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.1/umd/popper.min.js"></script>
    <%--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>--%>
    <link rel="stylesheet" href="../../css/bootstrap/css/bootstrap.min.css">
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.12.0/bootstrap-table.min.css" rel="stylesheet">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/bootstrap-table.min.js"></script>

    <!-- Latest compiled and minified Locales -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/locale/bootstrap-table-zh-CN.min.js"></script>

    <!--引入百度地图的jssdk，这里需要使用你在百度地图开发者平台申请的 ak-->
    <script src="http://api.map.baidu.com/api?v=2.0&ak=lOvsGfRWp6sri9fQdZjau5cU2guWFsG7"></script>
    <script src="../../js/echarts.min.js"></script>
    <script src="../../js/bmap.min.js"></script>
</head>

<body>

<%--服务器端分页测试：前端代码--%>
<div class="container" style="width: 700px;position: absolute;left: 20px;top: 50px;">
    <h1>Service Side Pagination</h1>
    <div style="width: 150px;height: 30px;position: absolute;top: 50px"  class="navbar-form navbar-left" role="search">        <%--构建一个搜索框--%>
        <div class="form-group">
            <input type="text" name="searchText" class="form-control" placeholder="Search">
        </div>
    </div>
    <div class="btn-group" style="position: absolute;top: 50px;left: 170px">     <%--构建一个搜索按钮--%>
        <button id="btn_search" onclick="" type="button"
                class="btn btn-primary btn-space" style="background-color: #e2e6ea;color: #17a2b8">
            <span class="fa fa-search" aria-hidden="true" class="btn-icon-space"></span>
            查询
        </button>
    </div>
    <table class="table table-hover" id="ServiceTable"
           data-pagination="true"
           data-show-refresh="true"
           data-show-toggle="true"
           data-showColumns="true">
        <thead>
        <tr>
            <%--<th data-field="state" data-checkbox="true"></th>--%>
            <th data-field="carid" data-width="80" data-align="center">CARID</th>
            <th data-field="brand" data-width="80" data-align="center">BRAND</th>
            <th data-field="model" data-width="170" data-align="center">MODEL</th>
            <th data-field="number" data-width="100" data-align="center">NUMBER</th>
            <th data-field="owner" data-width="100" data-align="center">OWNER</th>
            <th data-field="phone" data-width="50" data-align="center">PHONE</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<script src="../../js/myjs/myTable.js"></script>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 500px;height:350px;position: absolute;top: 50px;left: 780px;"></div>
<script src="../../js/myjs/myEcharts.js"></script>

<%--热力图绘制--%>
<div id="heat-map" style="width: 500px;height:350px;position: absolute;top: 400px;left: 780px;"></div>
<script src="../../js/myjs/myHeatMap.js"></script>

<%--前端端分页测试：前端代码--%>
<%--<div class="container">--%>
    <%--<h1>Client Side Pagination</h1>--%>
    <%--<p>Use <code>pagination</code>, <code>sidePagination</code>, <code>pageNumber</code>, <code>pageSize</code>, <code>pageList</code> options to set the pagination options.</p>--%>
    <%--<table id="table"--%>
           <%--data-toggle="table"--%>
           <%--data-height="460"--%>
           <%--data-pagination="true"--%>
           <%--data-search="true"--%>
           <%--data-show-pagination-switch="true"--%>
           <%--data-page-size="10"--%>
           <%--data-page-list="[5, 10, 20]"--%>
           <%--data-striped="true"--%>
           <%--data-url="../../json/bootstrap-table-pagination.json">--%>
        <%--<thead>--%>
        <%--<tr>--%>
            <%--<th style="width: 20px" data-field="id">ID</th>--%>
            <%--<th style="width: 20px" data-field="name">Item Name</th>--%>
            <%--<th style="width: 20px" data-field="price">Item Price</th>--%>
        <%--</tr>--%>
        <%--</thead>--%>
    <%--</table>--%>
<%--</div>--%>
<%--<script>--%>
    <%--var $table = $('#table');--%>
    <%--$(function () {--%>
    <%--});--%>
<%--</script>--%>
</body>
</html>
